<template>
  <!-- 个人中心页面 -->
  <view class="page-my">
    <!-- 用户信息区域 -->
    <view class="user-info-section">
      <view class="user-info" v-if="isLoggedIn">
        <image class="avatar" :src="userInfo.avatar || '/static/images/avatar-default.png'" @click="changeAvatar"></image>
        <view class="user-detail">
          <view class="nickname">{{ userInfo.nickname || '樱桃用户' }}</view>
          <view class="user-level">{{ userInfo.level || '普通会员' }}</view>
        </view>
        <view class="setting-btn" @click="goSetting">
          <text class="icon">⚙️</text>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <view class="login-btn" v-else>
        <image class="avatar" src="/static/images/avatar-default.png"></image>
        <view class="login-text" @click="goLogin">立即登录/注册</view>
      </view>
      
      <!-- 用户数据 -->
      <view class="user-data" v-if="isLoggedIn">
        <view class="data-item" @click="goFavorites">
          <view class="num">{{ userInfo.favoriteCount || 0 }}</view>
          <view class="label">收藏</view>
        </view>
        <view class="data-item" @click="goCoupon">
          <view class="num">{{ userInfo.couponCount || 0 }}</view>
          <view class="label">优惠券</view>
        </view>
        <view class="data-item" @click="goPoints">
          <view class="num">{{ userInfo.points || 0 }}</view>
          <view class="label">积分</view>
        </view>
      </view>
    </view>
    
    <!-- 我的订单 -->
    <view class="order-section">
      <view class="section-header">
        <view class="header-left">我的订单</view>
        <view class="header-right" @click="goOrderList">
          查看全部订单<text class="arrow">></text>
        </view>
      </view>
      
      <view class="order-types">
        <view class="order-type" @click="goOrderList(1)">
          <image class="icon" src="/static/images/icons/order-unpaid.png"></image>
          <view class="type-name">待付款</view>
          <view class="badge" v-if="orderCount.unpaid > 0">{{ orderCount.unpaid }}</view>
        </view>
        
        <view class="order-type" @click="goOrderList(2)">
          <image class="icon" src="/static/images/icons/order-unshipped.png"></image>
          <view class="type-name">待发货</view>
          <view class="badge" v-if="orderCount.unshipped > 0">{{ orderCount.unshipped }}</view>
        </view>
        
        <view class="order-type" @click="goOrderList(3)">
          <image class="icon" src="/static/images/icons/order-delivered.png"></image>
          <view class="type-name">待收货</view>
          <view class="badge" v-if="orderCount.delivered > 0">{{ orderCount.delivered }}</view>
        </view>
        
        <view class="order-type" @click="goOrderList(4)">
          <image class="icon" src="/static/images/icons/order-completed.png"></image>
          <view class="type-name">已完成</view>
        </view>
        
        <view class="order-type" @click="goOrderList(5)">
          <image class="icon" src="/static/images/icons/order-aftersale.png"></image>
          <view class="type-name">售后</view>
        </view>
      </view>
    </view>
    
    <!-- 常用功能 -->
    <view class="menu-section">
      <view class="menu-item" @click="goAddress">
        <image class="icon" src="/static/images/icons/address.png"></image>
        <view class="item-name">收货地址</view>
        <view class="arrow">></view>
      </view>
      
      <view class="menu-item" @click="goFavorites">
        <image class="icon" src="/static/images/icons/favorite.png"></image>
        <view class="item-name">我的收藏</view>
        <view class="arrow">></view>
      </view>
      
      <view class="menu-item" @click="goCoupon">
        <image class="icon" src="/static/images/icons/coupon.png"></image>
        <view class="item-name">优惠券</view>
        <view class="arrow">></view>
      </view>
      
      <view class="menu-item" @click="goPoints">
        <image class="icon" src="/static/images/icons/points.png"></image>
        <view class="item-name">我的积分</view>
        <view class="arrow">></view>
      </view>
      
      <view class="menu-item" @click="goFeedback">
        <image class="icon" src="/static/images/icons/feedback.png"></image>
        <view class="item-name">问题反馈</view>
        <view class="arrow">></view>
      </view>
      
      <view class="menu-item" @click="goAbout">
        <image class="icon" src="/static/images/icons/about.png"></image>
        <view class="item-name">关于我们</view>
        <view class="arrow">></view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-btn" v-if="isLoggedIn" @click="logout">
      退出登录
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import userApi from '@/api/user.js';
import orderApi from '@/api/order.js';
import '@/styles/pages/my/my.scss';

export default {
  data() {
    return {
      orderCount: {
        unpaid: 0,
        unshipped: 0,
        delivered: 0
      }
    };
  },
  computed: {
    ...mapGetters({
      isLoggedIn: 'user/isLoggedIn',
      userInfo: 'user/userInfo'
    })
  },
  onShow() {
    if (this.isLoggedIn) {
      this.loadOrderCount();
      this.loadUserInfo();
    }
  },
  methods: {
    ...mapActions({
      getUserInfo: 'user/getUserInfo',
      logoutAction: 'user/logout'
    }),
    
    // 加载用户信息
    async loadUserInfo() {
      try {
        const userInfo = await userApi.getUserInfo();
        this.getUserInfo(userInfo);
      } catch (error) {
        console.error('获取用户信息失败', error);
      }
    },
    
    // 加载订单数量
    async loadOrderCount() {
      try {
        const count = await orderApi.getOrderStatusCount();
        this.orderCount = count;
      } catch (error) {
        console.error('获取订单数量失败', error);
      }
    },
    
    // 前往登录页
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      });
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await userApi.logout();
              this.logoutAction();
              uni.showToast({
                title: '已退出登录',
                icon: 'success'
              });
            } catch (error) {
              console.error('退出登录失败', error);
            }
          }
        }
      });
    },
    
    // 修改头像
    changeAvatar() {
      if (!this.isLoggedIn) {
        this.goLogin();
        return;
      }
      
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          const tempFilePath = res.tempFilePaths[0];
          uni.showLoading({ title: '上传中...' });
          
          try {
            const avatar = await userApi.uploadAvatar(tempFilePath);
            await this.getUserInfo({ ...this.userInfo, avatar });
            uni.hideLoading();
            uni.showToast({
              title: '头像更新成功',
              icon: 'success'
            });
          } catch (error) {
            uni.hideLoading();
            uni.showToast({
              title: '上传失败，请重试',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 前往订单列表
    goOrderList(status) {
      if (!this.isLoggedIn) {
        this.goLogin();
        return;
      }
      
      let url = '/pages/order/list';
      if (status) {
        url += `?status=${status}`;
      }
      uni.navigateTo({ url });
    },
    
    // 前往地址管理
    goAddress() {
      if (!this.isLoggedIn) {
        this.goLogin();
        return;
      }
      
      uni.navigateTo({
        url: '/pages/address/list'
      });
    },
    
    // 前往收藏列表
    goFavorites() {
      if (!this.isLoggedIn) {
        this.goLogin();
        return;
      }
      
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    },
    
    // 前往优惠券
    goCoupon() {
      if (!this.isLoggedIn) {
        this.goLogin();
        return;
      }
      
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    },
    
    // 前往积分页面
    goPoints() {
      if (!this.isLoggedIn) {
        this.goLogin();
        return;
      }
      
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    },
    
    // 前往反馈页面
    goFeedback() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    },
    
    // 前往关于我们页面
    goAbout() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    },
    
    // 前往设置页面
    goSetting() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    }
  }
};
</script> 